<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>04CSS단위박스테두리</title>

		<h2>선택자우선순위</h2>
		<p>
			!important(속성값 뒤에 추가)
		</p>
		/*가장먼저 처리*/
		<p>
			인라인 스타일(style 태그로 적용)
		</p>
		<p>
			id선택자(#이름으로 적용)
		</p>
		<p>
			클래스 선택자(.이름으로 사용)
		</p>
		<p>
			가상 class선택자(:이름으로 사용)
		</p>
		<p>
			타입 선택자(요소이름 적용)
		</p>
		<style type="text/css">
			#no1 {
				font-size: 2em;
			}
			#no2 {
				font-size: 1.5em;
			}
			#no3 {
				font-size: 1.125em;
			}
			#no4 {
				font-size: 16px;
			}

			#c01 {
				color: red;
			}
			#c02 {
				color: green;
			}
			#c03 {
				color: blue;
			}

			#c04 {
				color: #FF0000;
			}
			#c05 {
				color: #008000;
			}
			#c06 {
				color: #0000FF;
			}
			#c07 {
				color: rgb(255,0,0);
			}
			#c08 {
				color: rgb(0,115,0);
			}
			#c09 {
				color: rgb(0,0,255)
			}

			#c10, #c11, #c12 {
				width: 250px;
				height: 150px;
			}
			#c10 {
				background-color: rgba(255,0,0,1);
			}
			#c11 {
				background-color: rgba(255,0,0,0.5);
			}
			#c12 {
				background-color: rgba(255,0,0,0.1);
			}

			#hyoju01 {
				width: 500px;
				height: 700px;
				background-image: url("images/7.jpg")
			}

			.boxclass {/*#b01,#b02,#b03,#b04,#b05{*/
				width: 250px;
				height: 150px;
			}
			/*상하좌우로 적용*/
			#b01 {
				background: lightgreen;
				margin: 300px;
				padding: 5px;
				border: 5px solid red;
			}
			/*상/하, 좌/우*/
			#b02 {
				background: rgb(128,128,255);
				margin: 20px 15px;
				padding: 5px 10px;
				border: 5px solid yellow;
			}
			/*상하좌우*/
			#b03 {
				background: rgb(255,0,255);
				margin: 35px 10px 15px 20px;
				padding: 5px 10px 15px 20px;
				border: 5px solid navy;
			}

			#b04 {
				background: rgb(150,150,205);
				border: 3px dashed blue;
			}

			#b05 {
				border: 5px double red;
			}
			#b06 {
				border: 5px dotted blue;
				border-radius: 15px;
			}
			#b07 {
				border: 5px groove red;
				border-radius: 15px, 20px, 25px, 30px;
			}

		</style>

	</head>

	<body>

		<h1>04CSS단위박스테두리</h1>
		<h2>css단위</h2>
		<h1>CSS단위 박스 테두리</h1>
		<h2>css크기단위 </h2>
		<p id="no1">
			H1 태그 기본 크기는 32px, 200%, 2em
		</p>
		<p id="no2">
			H2 태그 기본 크기는 24px,150%,1.5em
		</p>
		<p id="no3">
			H3 태그 기본 크기는 18px,133%,1.125em
		</p>
		<p id="no4">
			H 태그 기본 크기는 16px,100%,1em
		</p>

		<hr />
		<h2>색상단위</h2>
		<p>
			색상이름 color name : <span id="c01">red</span>,<span id="c02">grenn</span>,<span id="c03">blue</span>
		</p>
		<p>
			16진수 코드hex code : <span id="c04">red</span>,<span id="c05">grenn</span>,<span id="c06">blue</span>
		</p>
		<p>
			RGB 색상값 : <span id="c07">red</span>,<span id="c08">grenn</span>,<span id="c09">blue</span>
		</p>

		<div id="c10">
			투명도 rgba()
		</div>
		<div id="c11">
			투명도
		</div>
		<div id="c12">
			투명도
		</div>

		<hr />
		<h2>URL단위</h2>
		<div id="hyoju01">
			&nbsp;
		</div>

		<hr />
		<h2>CSS박스 모델 특성</h2>
		<p id="b01" class="boxclass">
			모든 html 요소들은 박스로 인식될 수 있음
		</p>
		<p id="b02" class="boxclass">
			html 요소에 적용된 박스는 다음의 특성이 존재함: 안쪽/바깥쪽 여백,테두리
		</p>
		<p id="b03" class="boxclass">
			박스의 크기는 width,height로 지정
		</p>
		<p id="b04" class="boxclass">
			박스의 여백은 margin,padding로 지정
		</p>
		<p id="b05" class="boxclass">
			박스의 테두리는 border로 지정
		</p>
		<p>
			CSS박스모델로 컨텐츠를 배치하다 보면 margin 병합현상이 발생 두박스를 수직으로 배치하는 경우
			상하 margin은 가장 큰 값으로 적용
		</p>

		<hr />
		<h2>CSS 테두리</h2>
		<p id="b06">
			테두리 두께, 테두리 종류, 테두리 색깔
		</p>
		<p id="b07">
			CSS3에 추가된 border-radius는 사각형 모서리를 둥글게 만들 수 있 모서리를 둥글게 만들 수 있게 해줌
			CSS3에 추가된 border-radius는 사각형게 해줌
		</p>

		<hr />
		<h2>박스 그림자 : box-shadow</h2>
		<p style="width: 300px; height: 200px;  background : white; box-shadow: 5px 5px 5px black">가</p>
		
		
		<hr />
		<h2>그라디언트 : gradient</h2>
		<p style="width: 350px; height: 200px; background: linear-gradient(350deg,#ffffff 0%,#000000 100%);"> </p>
		<p style="width: 350px; height: 200px; background: linear-gradient(to bottom right,orange,pink)"> </p>
		<p style="width: 350px; height: 550px; background: linear-gradient(red,orange,yellow,green,blue,indigo,violet)"> </p>
		<p style="width: 350px; height: 550px; background: linear-gradient(to bottom right,
		
		red,orange,yellow,green,blue,indigo,violet)"> </p>
	</body>
</html>
